<template>
  <div class="home-wrap">
    <Navbar></Navbar>
    <Splide :options="bannerOptions" aria-label="AI平台">
      <SplideSlide
        v-for="(slide, index) in slides"
        :key="index"
        class="banner-item"
      >
        <img :src="slide.src" :alt="slide.alt" />
        <div class="banner-overlay"></div>
        <span class="splide_text1">打破传统<br />AI时代的工作方式</span>
        <Typed :options="options">
          <span class="splide_text2">
            <span class="typing"></span>
          </span>
        </Typed>
        <span class="splide_text3">技术范式变革让机器理解人</span>
      </SplideSlide>
    </Splide>
    <div class="home-robot-content relative h-[600px] mt-[30px]">
      <div class="flex flex-row items-center justify-between">
        <div class="flex flex-col">
          <div class="flex flex-row items-center">
            <span class="robot-title">幻引AI小助手</span>
            <span
              class="robot-title-bg text-[#867FF4] text-center text-[24px] ml-[11px] h-[43px] flex flex-row items-center"
              >机器人全新对话模式</span
            >
          </div>
          <span class="text-[18px] mt-[10px]"
            >有什么想问我的吗？关于幻引智能的我都知道，欢迎来了解！</span
          >
        </div>
        <nuxt-link to="/ai-robot">
          <div
            class="group flex flex-row items-center justify-center w-[115px] h-[50px] border-[1px] border-[#7D7D7D] rounded-[2vw] hover:border-[#666666]"
          >
            <span class="text-[16px] text-[#7D7D7D] group-hover:text-[#333333]"
              >聊一聊</span
            >
            <svg
              class="ml-[10px] text-[#7D7D7D] group-hover:text-[#333333] w-[20px] h-[20px]"
              width="20"
              height="20"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M20 10C20 4.47715 15.5228 5.33895e-08 10 1.19249e-07C4.47715 1.85108e-07 5.33895e-08 4.47715 2.0266e-06 10C2.09246e-06 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10ZM8.75749 13.7477C8.64638 13.873 8.59083 14.0609 8.59083 14.2487C8.59082 14.374 8.64638 14.5618 8.70194 14.6871C8.92416 14.9376 9.25749 15.0002 9.47971 14.7497L13.0353 11.3054C13.3686 10.9297 13.5908 10.4913 13.5908 9.99034C13.5908 9.48935 13.4242 8.98837 13.0908 8.67525L9.53527 5.0431C9.31305 4.85523 8.97971 4.85523 8.75749 5.10572C8.59082 5.35621 8.59082 5.73195 8.81305 5.98245L12.3686 9.6146C12.4242 9.67722 12.4797 9.86509 12.4797 9.92772C12.4797 10.0764 12.4449 10.1466 12.4029 10.2315C12.3918 10.2539 12.3802 10.2773 12.3686 10.3035L8.75749 13.7477Z"
                fill="currentColor"
              />
            </svg>
          </div>
        </nuxt-link>
      </div>

      <div class="flex flex-col mt-[40px] w-full h-[282px] bg-[#F9FBFF]">
        <transition-group name="fade-up" tag="ul" class="list">
          <li
            v-for="(item, index) in robotItems"
            :key="index"
            class="list-item"
            :style="{ animationDelay: `${index * 0.2}s` }"
            @click="handleItemClick(item)"
          >
            <div class="flex items-center">
              <nuxt-img
                v-show="index === 0"
                :src="robot01"
                :alt="item"
                class="h-[26px] w-[36px] mr-[17px]"
              />
              <nuxt-img
                v-show="index === 1"
                :src="robot02"
                :alt="item"
                class="h-[26px] w-[36px] mr-[17px]"
              />
              <nuxt-img
                v-show="index === 2"
                :src="robot03"
                :alt="item"
                class="h-[26px] w-[36px] mr-[17px]"
              />
              <span class="text-[18px] text-[#2E2D2E]">{{ item }}</span>
            </div>
          </li>
        </transition-group>
      </div>
      <div class="input-container mt-[20px]">
        <input
          v-model="inputValue"
          @keyup.enter="handleInputSubmit"
          class="input-field"
          placeholder="给幻引小助手发送消息……"
        />
        <button
          @click="handleInputSubmit"
          :class="['input-button', { active: inputValue.trim() }]"
        >
          <svg
            class="input-icon"
            width="19.437012"
            height="19.452942"
            viewBox="0 0 19.437 19.4529"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <defs />
            <path
              id="Vector"
              d="M19.32 1.41C19.47 1.82 19.47 2.27 19.33 2.68L14.23 18.02C13.85 19.1 12.69 19.69 11.62 19.35C11.11 19.17 10.7 18.82 10.45 18.35L7.96 13.62C7.73 13.19 7.81 12.65 8.16 12.3L12.07 8.39C12.36 8.1 12.36 7.64 12.08 7.34C11.79 7.05 11.32 7.05 11.02 7.34L7.11 11.25C6.76 11.6 6.22 11.68 5.79 11.45L1.06 8.93C0.07 8.4 -0.3 7.16 0.25 6.16C0.49 5.69 0.91 5.34 1.42 5.18L16.75 0.1C17.83 -0.25 18.98 0.33 19.32 1.41Z"
              fill="#FFFFFF"
              fill-opacity="1.000000"
              fill-rule="nonzero"
            />
          </svg>
        </button>
      </div>

      <img
        src="@/assets/images/robot.png"
        alt="AI助手"
        class="w-[335px] h-[310px] absolute right-0 top-[128px]"
      />
      <transition-group
        name="fade-up"
        tag="ul"
        class="absolute right-0 top-[235px]"
      >
        <li
          v-for="(tip, index) in robotTips"
          :key="index"
          :style="{ animationDelay: `${(index + 1) * 0.2}s` }"
        >
          <div
            v-if="index != 1 || (index == 1 && !robotTyped)"
            class="flex flex-row h-fit w-fit relative animate-bounce"
            :class="tip.position"
          >
            <Typed :options="tip.options">
              <span class="typing robot-tips"></span>
            </Typed>
            <svg
              v-show="!robotTyped"
              class="absolute right-[-9px] bottom-[7px]"
              width="9.630249"
              height="7.784302"
              viewBox="0 0 9.63025 7.7843"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <defs />
              <path
                id="Vector 2"
                d="M0.2 7.78L9.42 7.78C9.61 7.78 9.7 7.54 9.55 7.42L0.32 0.04C0.19 -0.07 0 0.03 0 0.2L0 7.58C0 7.69 0.08 7.78 0.2 7.78Z"
                fill="#B677FF"
                fill-opacity="1.000000"
                fill-rule="evenodd"
              />
            </svg>
          </div>
        </li>
      </transition-group>
    </div>
    <div
      class="home-products-content mt-[30px] h-[614px] flex flex-col item-center"
    >
      <span class="text-[32px] font-semibold text-center mt-[57px]"
        >发布的产品</span
      >
      <span class="text-[18px] mt-[9px] text-[#7D7D7D] text-center"
        >将新一代的解决方案带给每个企业和个人</span
      >

      <div class="mt-[77px] flex flex-row justify-center">
        <div class="flex flex-col w-[488px]">
          <span class="font-semibold text-[40px] text-[#1955F7]"
            >AI记账<span class="text-[#2E2D2E]">小助手</span></span
          >
          <span class="mt-[12px] text-[18px] leading-[34px] text-[#7D7D7D]"
            >用户/企业无需操作，一句话轻松记录收入开支，只需要用最日常的语言描述需求。</span
          >
          <UModal v-model:open="openRobotModel">
            <span class="mt-[57px] products-btn try-now hover:scale-110">
              立即体验
            </span>

            <template #content>
              <div class="wechat-robot-bg">
                <span class="wechat-robot-title"
                  >微信扫描二维码，进入记账AI小程序</span
                >
                <span class="wechat-robot-desc-box">
                  <span class="wechat-robot-desc">智慧生活，轻松记账</span>
                </span>
                <img
                  src="@/assets/images/wechat-robot.png"
                  alt="AI助手"
                  class="w-[245px] h-[245px] wechat-robot-logo"
                />

                <div
                  class="absolute top-0 right-0 p-[20px] group"
                  @click="openRobotModel = false"
                >
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="group-hover:text-[#333333] text-[#6D7175]"
                  >
                    <g clip-path="url(#clip0_388_345)">
                      <path
                        d="M10 8.45722L15.3997 3.05749C15.6043 2.85291 15.8818 2.73797 16.1711 2.73797C16.4604 2.73797 16.7379 2.85291 16.9425 3.05749C17.1471 3.26208 17.262 3.53955 17.262 3.82888C17.262 4.11821 17.1471 4.39569 16.9425 4.60027L11.5428 9.99999L16.9425 15.3997C17.1471 15.6043 17.262 15.8818 17.262 16.1711C17.262 16.4604 17.1471 16.7379 16.9425 16.9425C16.7379 17.1471 16.4604 17.262 16.1711 17.262C15.8818 17.262 15.6043 17.1471 15.3997 16.9425L10 11.5428L4.60028 16.9425C4.39569 17.1471 4.11821 17.262 3.82889 17.262C3.53956 17.262 3.26208 17.1471 3.0575 16.9425C2.85291 16.7379 2.73798 16.4604 2.73798 16.1711C2.73798 15.8818 2.85291 15.6043 3.0575 15.3997L8.45722 9.99999L3.0575 4.60027C2.85291 4.39569 2.73798 4.11821 2.73798 3.82888C2.73798 3.53955 2.85291 3.26208 3.0575 3.05749C3.26208 2.85291 3.53956 2.73797 3.82889 2.73797C4.11821 2.73797 4.39569 2.85291 4.60028 3.05749L10 8.45722Z"
                        fill="currentColor"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_388_345">
                        <rect width="20" height="20" fill="white" />
                      </clipPath>
                    </defs>
                  </svg>
                </div>
              </div>
            </template>
          </UModal>
        </div>
        <img
          src="@/assets/images/ic-products.png"
          alt="AI助手"
          class="w-[538px] h-[320px]"
        />
      </div>
    </div>

    <div
      class="home-news-content mt-[30px] h-[800px] flex flex-col item-center"
    >
      <span class="text-[32px] font-semibold text-center mt-[57px]"
        >幻引新闻资讯</span
      >
      <span class="text-[18px] mt-[9px] text-[#7D7D7D] text-center"
        >掌握幻引最新动态，让技术更好地服务社会，打造支持不同场景、不同方向的智能应用程序</span
      >
      <transition-group
        name="fade-up"
        tag="ul"
        class="flex flex-row items-center flex-nowrap justify-center mt-[50px] gap-[20px]"
      >
        <li
          v-for="(newItem, index) in newsItems"
          :key="index"
          :style="{ animationDelay: `${(index + 1) * 0.3}s` }"
          class="card-item-transition"
        >
          <nuxt-link
            :to="newItem['content']"
            target="_blank"
            rel="noopener noreferrer"
          >
            <div
              class="card-item w-[365px] h-[480px] flex flex-col hover:scale-105 transform-gpu"
            >
              <img
                :src="newItem['coverimage']"
                alt="幻引新闻资讯"
                referrerpolicy="no-referrer"
                class="bg-gray-50 w-[316px] h-[160px] ml-auto mr-auto mt-[25px] object-cover object-top"
              />
              <span
                class="text-[#9D9D9D] text-[14px] mt-[15px] ml-[25px] mr-[25px]"
                >{{ newItem['submitdate'] }}</span
              >
              <span
                class="text-[#2E2D2E] font-semibold text-[20px] mt-[20px] ml-[25px] mr-[25px] line-clamp-2"
                >{{ newItem['title'] }}</span
              >
              <span
                class="text-[#2E2D2E] text-[16px] mt-[10px] ml-[25px] mr-[25px] line-clamp-2"
                >{{ newItem['sub_title'] }}</span
              >

              <span
                class="text-[18px] mt-[24px] ml-[25px] text-[#1955F7] group-hover:text-[#333333] underline"
                >查看详情</span
              >
            </div>
          </nuxt-link>
        </li>
      </transition-group>

      <nuxt-link to="/news" class="ml-auto mr-auto mt-[50px]">
        <div
          class="group flex flex-row items-center justify-center w-[163px] h-[50px] border-[1px] border-[#2E2D2E] rounded-[2vw] hover:border-[#1955F7]"
        >
          <span class="text-[16px] text-[#2E2D2E] group-hover:text-[#1955F7]"
            >查看更多资讯</span
          >
          <svg
            class="ml-[7px] text-[#2E2D2E] group-hover:text-[#1955F7] w-[20px] h-[20px]"
            width="20"
            height="20"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M20 10C20 4.47715 15.5228 5.33895e-08 10 1.19249e-07C4.47715 1.85108e-07 5.33895e-08 4.47715 2.0266e-06 10C2.09246e-06 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10ZM8.75749 13.7477C8.64638 13.873 8.59083 14.0609 8.59083 14.2487C8.59082 14.374 8.64638 14.5618 8.70194 14.6871C8.92416 14.9376 9.25749 15.0002 9.47971 14.7497L13.0353 11.3054C13.3686 10.9297 13.5908 10.4913 13.5908 9.99034C13.5908 9.48935 13.4242 8.98837 13.0908 8.67525L9.53527 5.0431C9.31305 4.85523 8.97971 4.85523 8.75749 5.10572C8.59082 5.35621 8.59082 5.73195 8.81305 5.98245L12.3686 9.6146C12.4242 9.67722 12.4797 9.86509 12.4797 9.92772C12.4797 10.0764 12.4449 10.1466 12.4029 10.2315C12.3918 10.2539 12.3802 10.2773 12.3686 10.3035L8.75749 13.7477Z"
              fill="currentColor"
            />
          </svg>
        </div>
      </nuxt-link>
    </div>

    <div
      class="home-partners-content mt-[30px] h-[430px] flex flex-col item-center mb-[78px]"
    >
      <span class="text-[32px] font-semibold text-center mt-[57px]"
        >合作客户与伙伴</span
      >
      <span class="text-[18px] mt-[9px] text-[#7D7D7D] text-center"
        >欢迎各位开发者、企业和机构与我们一起开创人工智能新时代</span
      >

      <Splide
        :options="partnersOptions"
        aria-label="AI场景落地"
        class="h-[80px] w-[1200px] mt-[68px] cursor-pointer"
      >
        <SplideSlide
          v-for="(partner, index) in partners"
          :key="index"
          class="transform-gpu partner-item"
        >
          <nuxt-link :to="partner.to" target="_blank" rel="noopener noreferrer">
            <img :src="partner.src" :alt="partner.alt" />
          </nuxt-link>
        </SplideSlide>
      </Splide>
      <Splide
        :options="partnersRightOptions"
        aria-label="合作客户与伙伴"
        class="h-[80px] w-[740px] mt-[20px] cursor-pointer ml-auto mr-auto"
      >
        <SplideSlide
          v-for="(partner, index) in partnersRight"
          :key="index"
          class="transform-gpu partner-item"
        >
          <nuxt-link :to="partner.to" target="_blank" rel="noopener noreferrer">
            <img :src="partner.src" :alt="partner.alt" />
          </nuxt-link>
        </SplideSlide>
      </Splide>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Navbar from '~/components/navbar.vue'
//引入
import { Typed } from '@duskmoon/vue3-typed-js'
import { Splide, SplideSlide } from '@splidejs/vue-splide'
import '@splidejs/vue-splide/css'
import banner from '@/assets/images/banner.png'
import partner1 from '@/assets/images/partner1.png'
import partner2 from '@/assets/images/partner2.png'
import partner3 from '@/assets/images/partner3.png'
import partner4 from '@/assets/images/partner4.png'
import partner5 from '@/assets/images/partner5.png'
import partner6 from '@/assets/images/partner6.png'
import partner7 from '@/assets/images/partner7.png'
import partner21 from '@/assets/images/partner21.png'
import partner22 from '@/assets/images/partner22.png'
import partner23 from '@/assets/images/partner23.png'
import partner24 from '@/assets/images/partner24.png'
import partner25 from '@/assets/images/partner25.png'
import robot01 from '@/assets/svg/robot01.svg'
import robot02 from '@/assets/svg/robot02.svg'
import robot03 from '@/assets/svg/robot03.svg'

// 定义 emit
const emit = defineEmits(['update-footer-style'])
const openRobotModel = ref(false)
const slides = ref([
  { src: banner, alt: 'Image 1' },

  { src: banner, alt: 'Image 1' },
])

const partners = ref([
  { src: partner1, alt: '上汽集团', to: 'https://www.saicmotor.com/chinese/' },
  { src: partner2, alt: '广汽集团', to: 'https://www.gac.com.cn/cn/' },
  { src: partner3, alt: '广汽丰田', to: 'https://www.gac-toyota.com.cn/' },
  { src: partner4, alt: '复星集团', to: 'https://www.fosun.com/' },
  { src: partner5, alt: 'BCG', to: 'https://www.bcg.com/' },
  { src: partner6, alt: 'PURE', to: 'https://www.pure-360.com.hk/en/' },
  { src: partner7, alt: '爱驰', to: 'https://www.ai-ways.com/' },
  { src: partner5, alt: 'BCG', to: 'https://www.bcg.com/' },
  { src: partner4, alt: '复星集团', to: 'https://www.fosun.com/' },
])

const partnersRight = ref([
  { src: partner21, alt: '善达信息', to: 'https://www.quickdone.cn/#/' },
  { src: partner22, alt: '威斯泰', to: '/' },
  { src: partner23, alt: '司羿智能', to: 'https://www.siyizn.com/' },
  { src: partner24, alt: 'SYNERiC', to: 'https://syneric.ai/' },
  { src: partner25, alt: 'AOTO奥拓', to: 'https://www.aoto.com/' },
  { src: partner23, alt: '司羿智能', to: 'https://www.siyizn.com/' },
])
const partnersOptions = {
  type: 'loop', // 无限循环
  direction: 'ltr', // 从左到右
  autoplay: true, // 自动播放
  interval: 1, // 每50毫秒滚动一次，调整此值以改变滚动速度
  speed: 90000, // 滚动速度，设置为0以实现匀速滚动
  perPage: 8, // 每次滚动10张图片
  gap: '20px', // 图片之间的间距
  drag: false, // 禁止拖动
  arrows: false, // 隐藏箭头
  pagination: false, // 隐藏分页器
}

const partnersRightOptions = {
  type: 'loop', // 无限循环
  direction: 'rtl', // 从左到右
  autoplay: true, // 自动播放
  interval: 1, // 每50毫秒滚动一次，调整此值以改变滚动速度
  speed: 75000, // 滚动速度，设置为0以实现匀速滚动
  perPage: 5, // 每次滚动10张图片
  gap: '20px', // 图片之间的间距
  drag: false, // 禁止拖动
  arrows: false, // 隐藏箭头
  pagination: false, // 隐藏分页器
}
const bannerOptions = {
  perPage: 1,
  pagination: false,
  arrows: false,
  type: slides.value.length > 1 ? 'loop' : 'slide',
  drag: slides.value.length > 1,
  swipe: slides.value.length > 1,
}

const options = {
  strings: [`开发互融<br>→ 至善创新`],
  // 是否循环
  loop: true,
  // 打字速度
  typeSpeed: 90,
  // 回退速度
  backSpeed: 20,
  backDelay: 2000,
  showCursor: true,
  fadeOut: true,
  cursorChar: '_',
  autoInsertCss: true,
}

const robotTyped = ref(true)

const robotTipsOptions1 = {
  strings: [`Hi👋，我是Ai机器人小幻`],
  // 是否循环
  loop: true,
  // 打字速度
  typeSpeed: 100,
  // 回退速度
  backSpeed: 0,
  backDelay: 40000,
  showCursor: false,
  fadeOut: true,
  cursorChar: '_',
  autoInsertCss: true,
  onStringTyped: () => {
    robotTyped.value = false
  },
  preStringTyped: () => {
    robotTyped.value = true
  },
}

const robotTipsOptions2 = {
  strings: [`有什么想了解的，都可以问我哦！`],
  // 是否循环
  loop: true,
  // startDelay: 2000,
  // 打字速度
  typeSpeed: 100,
  // 回退速度
  backSpeed: 0,
  backDelay: 38100,
  showCursor: false,
  fadeOut: true,
  autoInsertCss: true,
}
const msgs = useState('msgs', () => [])
const robotItems = ref(msgs)
const robotTips = ref([
  { options: robotTipsOptions1, position: 'mt-0 mr-[304px]' },
  { options: robotTipsOptions2, position: 'mt-[80px] ml-[50px]' },
])

const inputValue = ref('')

import { useState } from '#app'

const homeNews = useState('homeNews', () => [])

// 根据 homeNews 的长度决定 newsItems 的内容
const newsItems = computed(() => {
  if (homeNews.value.length > 3) {
    return homeNews.value.slice(0, 3)
  } else {
    return homeNews.value
  }
})

const configs = useState('configs', () => [])
const getConfigItem = (name) => {
  return configs.value.length
    ? configs.value.filter((it) => it.name === name)[0]?.value || ''
    : ''
}

const updateIntensionData = () => {
  const mineIntensionConfig = getConfigItem('mine_intension')
  if (mineIntensionConfig) {
    try {
      const mine_intension = JSON.parse(mineIntensionConfig)
      homeNews.value = mine_intension.news || []
      msgs.value = mine_intension.commonintentions || []
    } catch (e) {
      console.error('解析 mine_intension 配置失败:', e)
    }
  }
}

watch(
  () => configs.value,
  () => {
    updateIntensionData()
  },
  { deep: true },
)

onMounted(async () => {
  emit('update-footer-style', '#2F274C', '#FFFFFF')
  // console.log('onMounted');
  if (configs.value.length > 0) {
    updateIntensionData()
  }
})

const handleItemClick = (item) => {
  // 存储到 localStorage
  localStorage.setItem('questions', item)
  // 跳转到 ai-robot 页面
  navigateTo('/ai-robot')
}
const handleInputSubmit = () => {
  if (inputValue.value.trim()) {
    // 存储到 localStorage
    localStorage.setItem('questions', inputValue.value)
    // 清空输入框
    inputValue.value = ''
    // 跳转到 ai-robot 页面
    navigateTo('/ai-robot')
  }
}
</script>

<style lang="scss" scoped>
.home-wrap {
  width: 100%;
  display: flex;
  background: white;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.splide__slide {
  width: 100%;
  height: 723px;
}

.banner-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 82px;
  /* 遮罩层的高度 */
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
  /* 白色渐变 */
  z-index: 1;
}

.splide_text1 {
  position: absolute;
  left: 161px;
  top: 210px;
  color: rgb(46, 45, 46);
  font-size: 60px;
  font-weight: 600;
  line-height: 80px;
  letter-spacing: 0%;
  text-align: left;
}

.splide_text2 {
  position: absolute;
  left: 161px;
  top: 385px;
  background: linear-gradient(90deg, rgb(182, 119, 255), rgb(25, 85, 247));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 48px;
  font-weight: 600;
  line-height: 73px;
  letter-spacing: 0%;
  text-align: left;
  white-space: pre-line;
  overflow: visible;
}

.splide_text3 {
  position: absolute;
  left: 161px;
  top: 550px;
  font-weight: 400;
  font-size: 28px;
  color: #2e2d2e;
}

.home-robot-content {
  padding-top: 57px;
  width: 1120px;
  display: flex;
  flex-direction: column;
}

.robot-title {
  color: rgb(46, 45, 46);
  font-size: 32px;
  font-weight: 600;
  line-height: 45px;
  letter-spacing: 0%;
  text-align: left;
}

.robot-title-bg {
  background: url(@/assets/images/robot-title-bg.png) no-repeat center center;
  background-size: 100% 100%;
  padding: 0 6px 0 22px;
  /* 根据需要调整内边距 */
}

.wechat-robot-bg {
  background: url(@/assets/images/wechat-robot-bg.png) no-repeat center center;
  background-size: 100% 100%;
  width: 650px;
  height: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.wechat-robot-title {
  margin-top: 70px;
  font-size: 26px;
  font-weight: 600;
}

.wechat-robot-desc-box {
  margin-top: 15px;
  padding: 4px 20px;
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    rgba(182, 119, 255, 0.1) 3.7%,
    rgba(25, 85, 247, 0.1) 100%
  );
  margin-bottom: 35px;
}

.wechat-robot-desc {
  font-size: 22px;
  background: linear-gradient(90deg, rgb(182, 119, 255), rgb(25, 85, 247));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.wechat-robot-logo {
  object-fit: cover;
  object-position: center;
  display: block;
  background-color: white;
  mix-blend-mode: multiply;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 20px;
}

.list-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s forwards;
  height: 70px;
  padding-left: 30px;
  /* 设置固定高度 */
  margin-bottom: 15px;
  /* 设置间距 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 8px;
  cursor: pointer;
  /* 添加鼠标指针样式 */
  transition:
    background-color 0.3s,
    transform 0.3s;
  /* 添加过渡效果 */
  cursor: pointer;
}

.list-item:hover {
  background-color: #f0fbff;
  /* 鼠标悬停时的背景颜色 */
  transform: translateY(-5px);
  /* 鼠标悬停时的动画效果 */
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.fade-up-enter-active {
  animation: fadeInUp 0.8s;
}

.input-container {
  position: relative;
  width: 100%;
}

.input-field {
  width: 100%;
  padding: 15px 40px 15px 40px;
  border: 1px solid #cccccc;
  border-radius: 100px;
  font-size: 18px;
  outline: none;
  box-shadow: 0px 4px 10px 0px rgba(25, 85, 247, 0.15);
  transition: border-color 0.3s;
}

.input-field:focus {
  border-color: rgb(25, 85, 247);
}

.input-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  width: 54px;
  border-radius: 100px;
  height: 40px;
  background: rgba(25, 85, 247, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-button.active {
  background: linear-gradient(
    90deg,
    rgb(182, 119, 255) 3.704%,
    rgb(25, 85, 247) 100%
  );
}

.input-icon {
  width: 20px;
  height: 20px;
  fill: #7d7d7d;
}

.robot-tips {
  width: fit-content;
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0%;
  text-align: left;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  background: linear-gradient(
    270deg,
    rgb(182, 119, 255) 0%,
    rgb(25, 85, 247) 100%
  );
}

.robot-tips-animation {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s forwards;
}

.home-products-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: url(@/assets/images/products-bg.png) no-repeat center center;
  background-size: 100% 100%;
}

.products-btn {
  background-image: linear-gradient(
    90deg,
    rgb(182, 119, 255) 3.704%,
    rgb(25, 85, 247) 100%
  );
  border-radius: 4px;
  box-shadow: 0 1px 9px 0 rgba(117, 170, 255, 0.26);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  height: 40px;
  letter-spacing: 2px;
  line-height: 40px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 108px;
  box-sizing: border-box;
}

.try-now:before {
  -webkit-animation: moveLight 3s linear infinite;
  animation: moveLight 3s linear infinite;
  background: linear-gradient(
    to bottom right,
    hsla(0, 0%, 100%, 0.3),
    hsla(0, 0%, 100%, 0.15),
    hsla(0, 0%, 100%, 0)
  );
  content: '';
  height: 60%;
  left: -10%;
  position: absolute;
  top: 10%;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  width: 100%;
}

@keyframes moveLight {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-60deg);
    transform: translateX(-50%) translateY(-50%) rotate(-60deg);
  }

  100% {
    -webkit-transform: translateX(150%) translateY(150%) rotate(-60deg);
    transform: translateX(150%) translateY(150%) rotate(-60deg);
  }
}

.card-item-transition {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s forwards;
}

.card-item {
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.15);
  background: rgb(255, 255, 255);
  cursor: pointer;
}

.partner-item {
  width: 132px;
  height: 80px;
  min-height: 80px;
  box-sizing: border-box;
}

.partner-item img {
  object-fit: cover;
  object-position: center;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
</style>
